$(function () {
    let mychart = echarts.init(document.querySelector('.nineBox .body'))
    var colors = ["#1879f6", "#03e0ff", "#4963ff", "#03e080"].reverse();
    var datas = [{
            name: "内容1",
            value: 2
        },
        {
            name: "内容2",
            value: 2
        },
        {
            name: "内容3",
            value: 3
        },
        {
            name: "内容4",
            value: 4
        }
    ];
    var total = datas.reduce((prev, curr) => prev + curr.value, 0);
    let option = {
        color: colors,
        legend: {
            // orient: 'vertical',
            bottom: 0,
            itemGap: 15,
            itemWidth: 16,
            itemHeight: 16,
            textStyle: {
                color: "#fff",
                fontSize: 18
            },
            data: datas
        },
        tooltip: {
            trigger: "item",
            formatter: "{a} <br/>{b} : {c} ({d}%)"
        },
        series: [{
            name: "点什么点",
            type: "pie",
            radius: ["20%", "55%"],
            center: ["50%", "40%"],
            roseType: "radius",
            minShowLabelAngle: 60,
            label: {
                show: true,
                normal: {
                    position: "outside",
                    fontSize: 16,
                    formatter: params => {
                        return ((params.value / total) * 100).toFixed(2) + "%";
                    }
                }
            },
            labelLine: {
                length: 1,
                length2: 10,
                smooth: true
            },
            data: datas
        }]
    };

    mychart.setOption(option)
    window.addEventListener('resize', function () {
        mychart.resize()
    })
})